/* 搜索输入容器 */
.container {
  @apply relative w-full max-w-2xl mx-auto;
}

.container--small {
  max-width: 400px;
}

.container--medium {
  max-width: 600px;
}

.container--large {
  max-width: 800px;
}

/* 输入框包装器 */
.inputWrapper {
  @apply relative flex items-center bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm transition-all duration-200;
}

.container--focused .inputWrapper {
  @apply border-primary-500 ring-2 ring-primary-500 ring-opacity-20 shadow-md;
}

.container--disabled .inputWrapper {
  @apply bg-gray-100 dark:bg-gray-700 border-gray-200 dark:border-gray-600 opacity-60;
}

.container--loading .inputWrapper {
  @apply border-primary-400;
}

/* 搜索图标 */
.searchIcon {
  @apply flex items-center justify-center text-gray-400 dark:text-gray-500 ml-3;
  width: 20px;
  height: 20px;
}

.container--small .searchIcon {
  @apply ml-2;
  width: 16px;
  height: 16px;
}

.container--large .searchIcon {
  @apply ml-4;
  width: 24px;
  height: 24px;
}

/* 输入框 */
.input {
  @apply flex-1 bg-transparent border-0 outline-none text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400;
  padding: 12px 8px;
  font-size: 16px;
  line-height: 1.5;
}

.container--small .input {
  padding: 8px 6px;
  font-size: 14px;
}

.container--large .input {
  padding: 16px 12px;
  font-size: 18px;
}

.input:disabled {
  @apply cursor-not-allowed;
}

/* 防止 iOS 缩放 */
@media (max-width: 768px) {
  .input {
    font-size: 16px !important;
  }
}

/* 操作按钮区域 */
.actions {
  @apply flex items-center gap-1 mr-2;
}

.container--small .actions {
  @apply mr-1;
}

.container--large .actions {
  @apply mr-3;
}

/* 操作按钮 */
.actionButton {
  @apply opacity-70 hover:opacity-100 transition-opacity duration-200;
  min-width: auto !important;
  padding: 6px !important;
}

.container--small .actionButton {
  padding: 4px !important;
}

.container--large .actionButton {
  padding: 8px !important;
}

/* 搜索按钮 */
.searchButton {
  @apply ml-1;
}

.container--small .searchButton {
  @apply text-sm px-3 py-1;
}

.container--large .searchButton {
  @apply text-lg px-6 py-3;
}

/* 搜索建议 */
.suggestions {
  @apply absolute top-full left-0 right-0 z-50 mt-1;
}

/* 加载状态 */
.container--loading .inputWrapper::after {
  content: '';
  @apply absolute top-0 left-0 right-0 h-0.5 bg-gradient-to-r from-primary-500 to-purple-500;
  animation: loading-bar 2s ease-in-out infinite;
}

@keyframes loading-bar {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* 悬停效果 */
.inputWrapper:hover:not(.container--disabled .inputWrapper) {
  @apply border-gray-400 dark:border-gray-500 shadow-md;
}

/* 响应式设计 */
@media (max-width: 640px) {
  .container {
    @apply mx-4;
  }
  
  .actions {
    @apply gap-0.5;
  }
  
  .searchButton {
    @apply px-3 py-2 text-sm;
  }
  
  .actionButton {
    padding: 4px !important;
  }
}

@media (max-width: 480px) {
  .container {
    @apply mx-2;
  }
  
  .input {
    padding: 10px 6px;
    font-size: 14px;
  }
  
  .searchButton {
    @apply px-2 py-1.5 text-xs;
  }
  
  /* 在小屏幕上隐藏部分操作按钮 */
  .actionButton:not(:last-of-type) {
    @apply hidden;
  }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
  .inputWrapper {
    @apply border-2;
  }
  
  .container--focused .inputWrapper {
    @apply border-primary-600 ring-4;
  }
}

/* 减少动画模式 */
@media (prefers-reduced-motion: reduce) {
  .inputWrapper {
    @apply transition-none;
  }
  
  .actionButton {
    @apply transition-none;
  }
  
  .container--loading .inputWrapper::after {
    animation: none;
  }
}

/* 深色模式特殊处理 */
.dark .inputWrapper {
  @apply bg-gray-800 border-gray-600;
}

.dark .container--focused .inputWrapper {
  @apply border-primary-400 ring-primary-400;
}

.dark .inputWrapper:hover:not(.container--disabled .inputWrapper) {
  @apply border-gray-500;
}

/* 无障碍支持 */
.input:focus {
  @apply outline-none;
}

.container[aria-expanded="true"] .inputWrapper {
  @apply rounded-b-none;
}

/* 搜索历史和建议的过渡效果 */
.suggestions {
  animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
